﻿$(function() {
    var width=($("#draw-type ul").width()-2)/3;
    $("#draw-type ul li").width(width);
    init();
    
    $("#lookBug").bind("click", function() {
        $(".backField").html("");
        $(".project").html("");
        sessionStorage.type = 'region';
        sessionStorage.supporttype = "bug";
        var params = {
            "supporttype": "bug"
        };
        $.post(localStorage.location+"countbyareaname", params, function(data) {
            sessionStorage.supporttype = "bug";
            draw(data);
        });
    });

    $("#lookNeeds").bind("click", function() {
        $(".backField").html("");
        $(".project").html("");
        sessionStorage.type = 'region';
        sessionStorage.supporttype = "demand";
        var params = {
            "supporttype": "demand"
        };
        $.post(localStorage.location+"countbyareaname", params, function(data) {
            draw(data);
        });
    });
    $("#table-type").bind("click",function(){
        $("#table").css({"display":"block"}).siblings().css({"display":"none"});
        /*sessionStorage.sorts = "table";*/
    });

    $("#pie-type").bind("click",function(){
        $("#pie").css({"display":"block"}).siblings().css({"display":"none"});
        /*sessionStorage.sorts = "table";*/
    });
    $("#column-type").bind("click",function(){
        $("#column").css({"display":"block"}).siblings().css({"display":"none"});
        /*sessionStorage.sorts = "table";*/
    });

    $("#draw-type ul li").bind("click",function(){
        $(this).css({"background":"#00a1ea","color":"#fff"}).siblings().css({"background":"#eee","color":"#000"})
    });

    $(".backField").on("click", function () {
        $(".project").html("");
        var params = {
            "supporttype": sessionStorage.supporttype,
            "areaname": sessionStorage.areaname,
        };
        $.post(localStorage.location+"countbyfield", params, function (data) {
            draw(data);
            sessionStorage.type = "field";
        });
    });
    $(".backArea").on("click", function () {
        $(".backField").html("");
        $(".project").html("");
        $("#back").css({"display": "none"})
        var params = {
            "supporttype": sessionStorage.supporttype,
        };
        $.post(localStorage.location+"countbyareaname", params, function (data) {
            draw(data);
        });
        sessionStorage.type = "region";
        return 0;
    });

});

function draw(args) {
   var location="219.141.185.24:9082";
    var data = args.data;
    var piedata = [];
    var name = [];
    var number = [];
    for (var i = 0; i < data.length; i++) {
        piedata[i] = new Array();
        piedata[i][0] = data[i][0];
        piedata[i][1] = parseInt(data[i][1]);
        name[i] = data[i][0];
        number[i] = parseInt(data[i][1]);
    }
    $('#pie').highcharts({
        chart: {
            plotBackgroundColor: null,
            plotBorderWidth: null,
            plotShadow: false,
            width:925
        },
        title: {
            text: ''
        },
        tooltip: {
            pointFormat: ' <b>{point.percentage:.2f}%</b>'
        },
        plotOptions: {
            pie: {
                allowPointSelect: true,
                cursor: 'pointer',
                dataLabels: {
                    enabled: true,
                    useHTML : true, // 一定要加上
                    formatter : function() {
						return "<b style='max-width: 60px; display:inline-block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;'>" + this.point.name + "</b><br/><b>"+this.point.percentage.toFixed(2)+"%</b>";
						// 重点在white-space:pre-wrap
					},
                    style: {
                        color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black'
                    }
                },
                
                events: {
                    click: function(e) {
                        if (sessionStorage.type == "region") {
                            sessionStorage.areaname = name[e.point.x];
                      

                                                       $(".backField").html(">"+sessionStorage.areaname);
                            var params = {
                                "supporttype": sessionStorage.supporttype,
                                "areaname": name[e.point.x]
                            };
                            $.post(localStorage.location+"countbyfield", params, function(data) {
                                draw(data);
                            });
                            sessionStorage.type = "field";
                            return 0;
                        } else if (sessionStorage.type == "field") {
                            sessionStorage.field = name[e.point.x];
                            $(".project").html(">"+sessionStorage.field);

                            var params = {
                                "supporttype": sessionStorage.supporttype,
                                "areaname": sessionStorage.areaname,
                                "field": sessionStorage.field,
                            };
                            $.post(localStorage.location+"countbyproject", params, function(data) {
                                draw(data);
                            });
                            sessionStorage.type = "item";
                            return 0;
                        }
                    }
                }
            }
        },
        series: [{
            type: 'pie',
            name: '',
            data: piedata
        }],
        }); 

    $('#column').highcharts({
        chart: {
            type: 'column'
        },
        title: {
            text: ''
        },
        legend: {
            enabled: false
        },
        xAxis: {
            categories: name
        },
        yAxis: {
            min: 0,
            title: {
                text: ''
            }
        },
        tooltip: {
            headerFormat: '<span style="font-size:10px">{point.key}</span><table>',
            pointFormat: '<tr><td style="color:{series.color};padding:0"></td>' + '<td style="padding:0"><b>{point.y:.1f}</b></td></tr>',
            footerFormat: '</table>',
            shared: true,
            useHTML: true
        },
        plotOptions: {
            column: {
                pointPadding: 0.2,
                borderWidth: 0,
                events: {
                    click: function(e) {
                        
                        if (sessionStorage.type == "region") {
                            sessionStorage.areaname = e.point.category;
                            $(".backField").html(">"+sessionStorage.areaname);
                            var params = {
                                "supporttype": sessionStorage.supporttype,
                                "areaname": sessionStorage.areaname
                            };
                            $.post(localStorage.location+"countbyfield", params, function(data) {
                                draw(data);
                            });
                            sessionStorage.type = "field";
                            return 0;
                        } else if (sessionStorage.type == "field") {
                            sessionStorage.field = e.point.category;
                                                       $(".project").html(">"+sessionStorage.field);
                            var params = {
                                "supporttype": sessionStorage.supporttype,
                                "areaname": sessionStorage.areaname,
                                "field": sessionStorage.field,
                            };
                            $.post(localStorage.location+"countbyproject", params, function(data) {
                                draw(data);
                            });
                            sessionStorage.type = "item";
                            return 0;
                        }
                    }
                }
            },
            series: {
                dataLabels: {
                    align: 'center',
                    enabled: true,
                    color: '#FFFFFF',
                    y : 20,
                }
            }

        },
        series: [{
            data: number
        }]
    });
    $("#table").html("");
    //rules='rows
    if(sessionStorage.supporttype=="bug"){
        $("#table").append("<table id='categories' border='1' cellspacing='0' cellpadding='0' style='background:#e9eaec;border-color:#fefefe'><tr><th>分类</th><th>"+sessionStorage.supporttype+"数量</th></tr></table>");
    
    }else if(sessionStorage.supporttype=="demand"){
        $("#table").append("<table ' id='categories' border='1' cellspacing='0' cellpadding='0' style='background:#e9eaec;border-color:#fefefe; '><tr><th>分类</th><th>需求数量</th></tr></table>");
    
    }

 for (var j = 0; j < name.length; j++) {
         if(j%2==0){
           $("#table table").append("<tr id='"+j+"' style='background:#fefefe'><td class=\"tablerow\">" + name[j] + "</td><td id='tableNumber'>" + number[j] + "</td></tr>");
           
        }else{
           $("#table table").append("<tr id='"+j+"' style='background:#e9eaec'><td class=\"tablerow\">" + name[j] + "</td><td id='tableNumber'>" + number[j] + "</td></tr>");
        }
        
        $("tr[id='" + j + "']").bind("click",function() {
            if (sessionStorage.type == "region") {
                sessionStorage.areaname = $(this).find(".tablerow").html();
                               $(".backField").html(">"+sessionStorage.areaname);
                var params = {
                    "supporttype": sessionStorage.supporttype,
                    "areaname": sessionStorage.areaname
                };
                $.post(localStorage.location+"countbyfield", params, function(data) {
                    draw(data);

                });
                sessionStorage.type = "field";
                return 0;
            } else if (sessionStorage.type == "field") {
                sessionStorage.field=$(this).find(".tablerow").html();

                               $(".project").html(">"+sessionStorage.field);
                var params = {
                    "supporttype": sessionStorage.supporttype,
                    "areaname": sessionStorage.areaname,
                    "field": sessionStorage.field,
                };
                $.post(localStorage.location+"countbyproject", params, function(data) {
                    draw(data);
                });
                sessionStorage.type = "item";
                return 0;
            }

     
    

        });
    }
 

    
}

function init(){
    sessionStorage.type = 'region';
	sessionStorage.supporttype = "bug";
	var params = {
			"supporttype": "bug"
	};
	$.post(localStorage.location+"countbyareaname", params, function(data) {
			sessionStorage.supporttype = "bug";
			draw(data);
	});
}
